<template>
  <div class="item-title">
    <div class="left">
      <p class="title-con">
        <span>{{ title }}</span>
      </p>
      <p class="title-prompt">
        <span>{{ prompt }}</span>
      </p>
    </div>
    <div class="right">
      <slot name="btn" />
    </div>

  </div>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'Index',
  props: {
    title: {
      type: String,
      default: '标题',
    },
    prompt: {
      type: String,
      default: '',
    },
  },
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
.item-title {
  height: 40px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background-color: rgba(40, 110, 230, 0.1);
  p {
    margin: 0px;
  }
  .left {
    display: flex;
    .title-con {
      font-size: 16px;
      color: $main-color;
      padding-left: 10px;
      border-left: 4px solid $main-color;
      padding-right: 20px;
    }
    .title-prompt {
      font-size: 14px;
      color: $assist-color;
    }
  }
}
</style>
